<template>
	<view>
		<view class="flex flex-direction align-center justify-center">
			<view class="piao flex flex-direction align-center" style="background-image: url(/static/e1.png);">
				<text>您的专属分享二维码</text>
				<!-- <web-view  :src="imgUrl"></web-view> -->
				<!-- <image :src="imgUrl"></image> -->
				<!-- <canvas canvas-id="couponQrcode">
				</canvas> -->
				<canvas canvas-id="couponQrcode">
				</canvas>
				<view class="piao-btn" @click="copyUrl">保存图片</view>
			</view>
			<view class="textarea">
				<textarea placeholder="分享时你想顺便说点啥..." v-model="shareContent"></textarea>
			</view>
		</view>
		
		<!-- <view v-if="isShow" class="wrapper flex align-center justify-center">
			<canvas  canvas-id="myCanvas"></canvas>
		</view> -->
		<view v-if="isShow" class="wrapper flex align-center justify-center">
			<view class="flex flex-direction align-center">
				<canvas  canvas-id="myCanvas"></canvas>
			</view>
		</view>
		
		<view class="bto flex align-center justify-center">
			<view class="bto-con flex flex-direction align-center">
				<text>温馨提示</text>
				<text>将此二维码分享到朋友圈微博等，好友点击后购买商</text>
				<text>品您将获得佣金额！</text>
			</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	const qrCode = require('@/components/weapp-qrcode.js')
	export default {
		data() {
			return {
				imgUrl: '',
				shareUrl: 'http://baoma.seenthink.cn/regwebchat?key=',
				qrPath: '',
				shareContent: '',
				cover: '/static/e1.png',
				isShow: true,
			}
		},
		onLoad() {
			this.loadMyInvitationLink()
		},
		onShareAppMessage(res) {
			console.log('onShareAppMessage:' + JSON.stringify(res))
		},
		methods: {
			loadMyInvitationLink: function() {
				try {
					var userId = uni.getStorageSync('user').user_id;
					api.get({
						url: 'User/GetShare',
						data: {
							user_id: userId
						},
						success: data => {
							console.log(JSON.stringify(data))
							if (data.ErrCode == 0) {
								this.imgUrl = data.Response.red_code
								this.couponQrCode()
							}
						}
					});
				} catch (e) {
					uni.showModal({
						title: '提示',
						content: '账号超时，请重新登陆',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								});
							}
						}
					});
				}
				
			},
			copyUrl: function() {
				if(!this.isShow){
					this.isShow= true
				} 
				this.saveImg()
				// uni.setClipboardData({
				// 	data: this.imgUrl,
				// 	success: function() {
				// 		// uni.showModal({
				// 		// 	title:'成功'
				// 		// })
				// 	}
				// });
			},
			couponQrCode: function() {
				console.log('couponQrCode url:'+this.shareUrl + this.imgUrl)
				new qrCode('couponQrcode', {
					text: this.shareUrl + this.imgUrl,
					width: 85,
					height: 85,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
				let _this = this
				uni.canvasToTempFilePath({
					canvasId: 'couponQrcode',
					fileType: 'jpg',
					x: 0,
					y: 0,
					width: this.windowWidth * 0.6,
					height: 100,
					destWidth: this.windowWidth * 0.6,
					destHeight: 100,
					success: function(res) {
						console.log('couponQrCode:' + res.tempFilePath)
						_this.qrPath = res.tempFilePath
					},
					fail: function(error) {
						console.log(error)
					},
				})

			},
			saveImg() {
				let _this = this
				uni.canvasToTempFilePath({
					canvasId: 'couponQrcode',
					fileType: 'jpg',
					x: 0,
					y: 0,
					width: this.windowWidth,
					height: 100,
					destWidth: this.windowWidth,
					destHeight: 100,
					success: function(res) {
						console.log(res.tempFilePath)
						_this.qrPath = res.tempFilePath
						_this.qrR(_this.qrPath)
					},
					fail: function(error) {
						console.log(error)
					},
				})
			},
			qrR(path) {
				let that = this;
				this.qr_path = path;
				let system_info = uni.getSystemInfoSync();
				let ctx = uni.createCanvasContext('myCanvas');
				ctx.drawImage(this.cover, 0, 0, 300, 200);
				ctx.drawImage(path, 100, 18, 100, 100);
				ctx.font = '13px Arial';
				ctx.fillStyle = '#000';
				ctx.fillText('您的专属分享二维码', 92, 130);
				if(this.shareContent == ''){
					this.shareContent='快来加入我们的团队吧'
				}
				ctx.fillText(this.shareContent,90, 145);
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'myCanvas',
						success: function(res) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									that.isShow = false
									console.log('save success');
									uni.showModal({
										title:'提示',
										content:'二维码已保存到相册',
									})
								},
								complete(e) {
								that.isShow = false	
								}
							});
						},
						fail(e) {
							console.log(e);
							uni.showToast({
								title: '生成海报失败',
								icon: 'none'
							});
						}
					});
				});
			},


		}
	}
</script>

<style lang="scss" scoped>
	.wrapper1 {
		width: 100%;
		height: 560upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 1upx;
	}
  .wrapper1 canvas{
  	   width:100%;
  }
   .wrapper {
	margin-top: -200upx;   
   	width: 100%;
	height: 560upx;
	position: absolute;
   }
   .wrapper>view:nth-child(1){
   	   width:100%;
   }
	.bto {
		width: 100%;
		position: absolute;
		bottom: 30upx;
	}

	.bto-con>text:nth-child(1) {
		font-size: 32upx;
		color: #000000;
		margin-bottom: 8upx;
	}

	.bto-con>text:nth-child(2),
	.bto-con>text:nth-child(3) {
		font-size: 22upx;
		color: #666666;
	}

	.textarea {
		border: 1upx solid #ddd;
		border-radius: 10upx;
		width: 560upx;
		height: 150upx;
		padding: 10upx;
		box-sizing: border-box;
	}

	.textarea>textarea {
		width: 560upx;
		font-size: 26upx;
	}

	page {
		background-color: #fff;
	}

	.piao-btn {
		width: 214upx;
		height: 56upx;
		background-color: $btn-bground;
		border-radius: 110upx;
		text-align: center;
		line-height: 56upx;
		color: #fff;
		font-size: 28upx;
		margin-top: 80upx;
	}

	.piao image {
		width: 207upx;
		height: 207upx;
		margin-top: 40upx;
	}

	.piao canvas {
		width: 207upx;
		height: 207upx;
		margin-top: 20upx;
	}

	.piao>text {
		margin-top: 60upx;
		font-size: 28upx;
		color: #010101;
	}

	.piao {
		margin-top: 50upx;
		width: 640upx;
		height: 560upx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.myCan {
		width: 120upx;
		height: 120upx;
		margin-top: 5upx;
	}
</style>
